import React from "react";
import Searchpanel from "./Searchpanel";
import List from "./Lists";
import { useDebounce, useDocumentTitle } from "utils";
import styled from "@emotion/styled";
import { Button } from "antd";
import { useProjects } from "../../utils/project";
import { useUsers } from "../../utils/user";
import { useProjectModal, useProjectsSearcgParams } from "./util";
import { ErrorBox, Row } from "../../components/lib";

export default function Index() {
  useDocumentTitle("项目列表", false);

  // const [keys] = useState<('name' | 'personId')[]>(['name', 'personId'])
  const [param, setParam] = useProjectsSearcgParams();
  const {
    isLoading,
    error,
    data: list,
    // retry,
  } = useProjects(useDebounce(param, 200));
  const { data: users } = useUsers();
  // const dispatch = useDispatch();
  const { open } = useProjectModal();
  return (
    <Container>
      <Row between={true}>
        <h1>项目列表 </h1>
        {/*<Button onClick={() => dispatch(projectListActions.openProjectModal())}>*/}
        <Button onClick={open}>创建项目</Button>
      </Row>
      <Searchpanel param={param} setParam={setParam} users={users || []} />
      {/*{error ? (*/}
      {/*    <Typography.Text type={"danger"}>{error.message}</Typography.Text>*/}
      {/*) : null}*/}
      <ErrorBox error={error} />

      <List
        // refresh={retry}
        loading={isLoading}
        dataSource={list || []}
        users={users || []}
      />
    </Container>
  );
}
const Container = styled.div`
  padding: 3.2rem;
  flex: 1;
`;
